<template>
    <div>
        <el-upload list-type="picture-card" action="#" :file-list="fileList" :accept="accept" :show-file-list="true"
            :limit="limit" :multiple="false" :auto-upload="false" :on-exceed="exceed" :on-change="handleChange"
            :on-remove="handleBeforeRemove">
            <i class="el-icon-plus"></i>
            <!-- <el-button type="text">上传文件</el-button> -->
        </el-upload>
        <span v-if="limit > 1">
            请上传最多{{ limit }}张图片格式（{{ accept }}）的文件
        </span>
        <span v-else>
            请上传{{ limit }}张图片格式（{{ accept }}）的文件
        </span>
    </div>
</template>

<script>
//
import fileUpload from '@/api/file.js'
export default {
    name: '',
    props: {
        // 图片列表，用来实现回显，列表格式必须为[{ name: 'placard.jpeg', url: 'https://......' }]
        imgList: {
            type: Array,
            default: () => {
                return []
            }
        },
        limit: {
            type: Number,
            default: 2
        },
        accept: {
            type: String,
            default: '.png, .jpg, .jpeg'
        },
        //单位MB
        size: {
            type: Number,
            default: 2
        },
        fileUrlList: {
            type: Array,
            default: () => {
                return []
            }
        },
        isUrl: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        idList: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            // 文件列表
            retsetImage: true,
            fileList: [],
            fileIdList: [],
            fileRawList: []
        }
    },
    watch: {
    },
    mounted() {
        if (!this.isUrl) {
            this.idList.filter(id => {
                this.fileList.push({
                    isUrl: true,
                    fileId: id,
                    url: `${this.$baseurl.fileServiceUrl}fish/public/files/download?fileId=${id}`
                })
            })
        } else {
            this.fileUrlList.filter(url => {
                this.fileList.push({
                    isUrl: true,
                    url
                })
            })
        }

    },
    methods: {
        exceed() {
            this.$alert(`最多上传${this.limit}张,请删除后再上传`, '提示', {
                confirmButtonText: '确定',
                type: 'warning'
            });
        },
        handleBeforeRemove(file, fileList) {
            console.log(fileList)
            this.fileList = fileList
            this.upload()
        },
        handleChange(file, fileList) {
            this.fileList = fileList;
            if (this.beforeUpload(file)) {
                this.upload()
            } else {
                this.$nextTick(() => {
                    let index = this.fileList.findIndex((item) => {
                        return item.uid == file.uid
                    })
                    this.fileList.splice(index, 1);
                })
            }
        },
        beforeUpload(file) {
            let size = this.size || 2
            console.log(file.size / 1024 / 1024)
            let size10M = file.size / 1024 / 1024 < size
            if (!size10M) {
                this.$message.warning(`上传文件大小不能超过${size}MB!`);
                return false
            } else {
                return true
            }
        },
        upload() {
            let promiseAllList = [];
            if (this.fileList.length == 0) {
                this.$emit('getFileIdList', { fileIdList: [] })
            } else {
                this.fileIdList = [];
                this.fileRawList = [];
                this.fileList.forEach(file => {
                    if (!file.isUrl) {
                        let formData = new FormData();
                        formData.append("file", file.raw);
                        promiseAllList.push(fileUpload.upload(formData))
                        this.fileRawList.push(file.raw)
                    } else {
                        if (this.isUrl) {
                            file.url && this.fileIdList.push(file.url)
                        } else {
                            file.fileId && this.fileIdList.push(file.fileId)
                        }
                    }
                })
                this.$emit('getFileRawList', { fileRawList: this.fileRawList })
                Promise.all(promiseAllList).then((resList) => {
                    if (this.isUrl) {
                        resList.forEach(item => {
                            item.data && this.fileIdList.push(`${this.$baseurl.fileServiceUrl}fish/public/files/download?fileId=${item.data}`)
                        })
                    } else {
                        resList.forEach(item => {
                            item.data && this.fileIdList.push(item.data)
                        })
                    }
                    this.$emit('getFileIdList', { fileIdList: this.fileIdList })
                }).catch(errList => {
                    console.log(errList)
                });
            }
        },
    }
}
</script>

<style lang="scss">
.disUoloadSty .el-upload--picture-card {
    display: none;
    /* 上传按钮隐藏 */
}
</style>